<template>
  <el-drawer
    :visible.sync="drawerVisible"
    :wrapper-closable="true"
    :close-on-press-escape="false"
    :with-header="false"
    :size="showMobilePage?'100%':'80%'"
    title="新增客户"
    append-to-body
    @close="handleClose"
  >
    <div v-if="!freshCom" class="create-page-dialog">
      <createCustomer v-if="component === 'customer'" page-type="component" @submit="submit" @close="handleClose" />
      <template v-if="component === 'supplier'">
        <createSupplier v-if="supplierSource === 0" :from-fly-user="fromFlyUser" :extend-params="extendParams" style="padding:0;padding-bottom: 55px;" page-type="component" @submit="submit" @close="handleClose" />
        <div v-if="supplierSource === 2">
          <Title title="创建萌力供应商" style="margin: 16px 16px 24px 16px;"/>
          <createMengliSupplier style="padding:0;" page-type="component" @submit="submit" @close="handleClose" />
        </div>
        <div v-if="supplierSource === 6">
          <Title title="创建有赞供应商" style="margin: 16px 16px 24px 16px;"/>
          <createCommerceSupplier style="padding:0;" page-type="component" @submit="submit" @close="handleClose" />
        </div>
      </template>
    </div>
  </el-drawer>
</template>

<script>
import createCustomer from '@/views/customer/create/index';
import createSupplier from '@/views/supplierManage/create/index';
import createMengliSupplier from '@/views/mengliPlanet/supplier/create';
import createCommerceSupplier from '@/views/commerce/supplier/create';
import Title from '@/components/Title';
import { mapState } from 'vuex';

export default {
  title: 'createPageDialog',
  components: { createCustomer, createSupplier, createMengliSupplier, Title, createCommerceSupplier },
  props: {
    component: {
      type: String,
      default: 'customer'
    },
    supplierSource: { // 当创建供应商时，判断创建销售供应商还是萌力供应商 [{ id: 0, value: '销售供应商' }, { id: 2, value: '萌力供应商' }, { id: 6, value: '有赞供应商' }]
      type: Number,
      default: 0
    },
    fromFlyUser: { // 飞来用户新建飞博供应商
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      drawerVisible: false,
      freshCom: false,
      extendParams: null
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    submit(data) {
      this.$emit('update', data);
      this.handleClose();
    },
    open(extendParams) {
      if (extendParams) this.extendParams = extendParams;
      this.drawerVisible = true;
      this.freshCom = false;
    },
    handleClose() {
      this.drawerVisible = false;
      this.extendParams = null;
      setTimeout(() => {
        this.freshCom = true;
        // this.$nextTick(() => { this.freshCom = false; });
      }, 500);
    }
  }
};
</script>

<style lang="scss" scoped>
.create-page-dialog {
  &::v-deep  {
    .pagination-flex {
      position: absolute;
      width: 100% !important;
    }

  }
}
::v-deep .el-drawer__body {
  overflow: auto !important;
}
</style>
